<script lang="ts">
import { defineComponent, ref, onMounted,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getClassDes } from '../api/class/classdes'
import { showToast } from 'vant'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
export default defineComponent({
  setup() {
    let router: any = useRouter();
    let route: any = useRoute();
    let classDes: any = ref(null);
    let groupId = route.query.groupId;
    let seriesid = route.query.seriesid;
    let userinput: any = ref(null);
    let checkbox: any = ref(false);
    let price = route.query.price;
    let token=window.localStorage.getItem("userId");

    const store = useCounterStore();
console.log('store',store)
    const {  userInfoheard } = storeToRefs(store)
    const { getUserInfoFun } = store;

    let back = () => {
      router.back();
    }
    let payment = () => {
      if (!checkbox.value) {
        showToast('请勾选服务协议');
        return;
      } else {
        router.push({
          path: '/payment',
          query: {
            groupId,
            seriesid,
            price,
            userinput:userinput.value
          }
        })
      }
    };
    watch(checkbox, ()=>{
      console.log("checkbox", checkbox);
    })
    let getClassDesFun = (groupId: any) => {
      getClassDes(groupId).then((data: any) => {
        console.log('课程详情数据=>', data)
        classDes.value = data.data
        console.log('课程详情数据classDes=>', classDes.value)
      })
    }
    onMounted(() => {
      getClassDesFun(groupId);
      getUserInfoFun();
      console.log(555555,userInfoheard)
    })
    return {
      back,
      payment,
      classDes,
      userinput,
      checkbox,
      price,
      userInfoheard,
      getUserInfoFun,
    }
  }
})
</script>
<template>
  <div class="order" v-if="classDes">
    <div class="desbar">
      <span class="iconfont icon-xiangzuojiantou" @click="back"> </span>
      <h2>确认下单</h2>
    </div>
    <!-- 购买用户信息 -->
    <div class="buy-user">
      <div class="userimg">
        <img :src="userInfoheard.avatar" alt="" />
      </div>
      <div class="username">{{userInfoheard.username}}</div>
    </div>
    <!-- 用户购买的课程 -->
    <div class="buy-class">
      <div class="class-top">
        <span class="iconfont icon-boshimao"></span>
        {{ classDes.videoCount }}课
      </div>
      <div class="class-order">
        <div class="classimg">
          <img :src="classDes.avatar" alt="" />
        </div>
        <div class="list-right">
          <span class="text-cut">{{ classDes.groupName }}</span>
          <div class="list-count" v-if="classDes.effectiveEndTime">
            有效期至{{ classDes.effectiveEndTime.match(/^\d{4}-\d{2}-\d{2}/)[0] }}
          </div>
          <div class="price">￥ {{ price }}</div>
        </div>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="order-intro">
      <div class="text">
        课程总价
        <span
          >共一个课程<em>￥{{ price }}</em></span
        >
      </div>
      <div class="text">
        优惠券抵扣
        <span>无优惠券可用</span>
      </div>
      <div class="text">
        备注
        <input type="text" placeholder="最多输入20个字" v-model="userinput" />
      </div>
    </div>
    <!-- 点击勾选信息 -->
    <div class="checked">
      <input type="checkbox" v-model="checkbox" />

      点击立即支付表示您同意<span>《服务协议》</span>
    </div>
    <!-- 支付按鈕 -->
    <div class="class-fixed-bottom">
      <div class="class-btn" @click="payment">立即支付</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.order {
  background-color: #f7f8fa;

  .desbar {
    display: flex;
    line-height: 44px;
    padding: 0 10px;
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: #f5f5f5;
    span {
      font-size: 20px;
      font-weight: 600;
    }
    h2 {
      position: fixed;
      left: 50%;
      font-size: 18px;

      transform: translateX(-50%);

      // margin-left: 50px;
    }
  }
  .buy-user {
    padding: 0 18px;
    display: flex;
    background-color: #f7f8fa;
    height: 80px;
    align-items: center;
    .userimg {
      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }
    }
    .username {
      margin-left: 14px;
      font-size: 14px;
      color: #2f3742;
    }
  }
  .buy-class {
    padding: 0 20px;
    background-color: #fff;
    margin-bottom: 10px;
    .class-top {
      color: #95a1af;
      font-size: 14px;
      line-height: 43px;
    }
    .class-order {
      display: flex;
      padding-bottom: 15px;
      .classimg {
        img {
          width: 86px;
          height: 52px;
          border-radius: 5px;
        }
      }
      .list-right {
        margin-left: 10px;

        & > span {
          font-size: 14px;
        }
        .list-count {
          color: #95a1af;
          font-size: 12px;
          line-height: 30px;
        }
        .price {
          color: #ff3271;
          font-weight: 700;
          font-size: 14px;
        }
      }
    }
  }
  .order-intro {
    background-color: #fff;
    .text {
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px 0 17px;
      font-size: 14px;
      font-weight: 600;
      span {
        color: #95a1af;
        font-size: 14px;
        font-weight: normal;
        em {
          // color:#2f3742;
        }
      }
      input {
        border: none;
        width: 100px;
        outline: none;
        color: #cfd4db;
        font-weight: normal;
        &::-webkit-input-placeholder {
          color: #cfd4db;
        }
      }
    }
  }
  .checked {
    margin-top: 11px;
    background-color: #fff;
    color: #2f3742;
    font-size: 14px;
    padding: 0 18px;
    line-height: 56px;
    input {
      margin-top: 3px;
    }
    span {
      color: #84aaff;
    }
  }
  .class-fixed-bottom {
    width: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 100;
    height: 55px;
  }
  .class-btn {
    background-color: #ff3e8f;
    color: #fff;
    height: 44px;
    width: 91%;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 44px;
    border-radius: 20px;
    margin-right: 13px;
    margin-left: 15px;
  }
}
</style>